<template>
  <div class="step-container">
    <div :class="{'is-scroll':isShowScroll}" class="order-detail-step">
      <template v-if="indexJudge">
        <div class="steps">
          <div
            v-for="(item, index) in stepList"
            :class="{'finish': orderStatus > index || (index === stepList.length - 1 && orderStatus === index), 'disable': disableItems.indexOf(item.id) >= 0, 'active': orderStatus === index || lookActive === index, 'flex-50': index !== stepList.length - 1, 'last': index === stepList.length - 1}"
            :key="item.id"
            :style="pointer?{cursor: 'pointer'}:''"
            class="step"
            @click="itemClick(item)">
            <div class="center">
              <div class="icon-wrap">
                <img :src="getStepIcon({item, index})">
              </div>
              <div class="main-text center">
                <span class="step-text">{{ `STEP${index + 1}` }}</span>
                <ToolTip v-if="item.name && item.name.length > 6" :content="item.name" class="step-title" style="max-width: 100px;"/>
                <div v-else class="step-title">{{ item.name }}</div>
              </div>
              <div v-if="index !== stepList.length - 1" class="step-line"/>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="steps">
          <div
            v-for="(item, index) in stepList"
            :class="{'finish': orderStatus > item.id || (!item.notFinish && index === stepList.length - 1 && orderStatus === item.id), 'disable': disableItems.indexOf(item.id) >= 0, 'active': orderStatus === item.id || lookActive === item.id, 'flex-50': index !== stepList.length - 1, 'last': index === stepList.length - 1}"
            :key="item.id"
            :style="pointer?{cursor: 'pointer'}:''"
            class="step"
            @click="itemClick(item)">
            <div class="center">
              <div class="icon-wrap">
                <img :src="getStepIcon({item, index})">
              </div>
              <div class="main-text center">
                <span class="step-text">{{ `STEP${index + 1}` }}</span>
                <ToolTip v-if="item.name && item.name.length > 6" :content="item.name" class="step-title" style="max-width: 100px;"/>
                <div v-else class="step-title">{{ item.name }}</div>
              </div>
              <div v-if="index !== stepList.length - 1" class="step-line"/>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div v-if="nodeApprovers.length > 0" class="node-approvers">
      <div v-for="(item,index) in handleArr" :key="index" :class="{'last-node': index === handleArr.length - 1}" class="node">
        <div v-if="item.length !== 0" :class="`status-${item[0].status}`" class="circle"/>
        <span v-if="item.length === 1" :class="`text-${item[0].status}`" class="text">{{ `${item[0].name}  ${ standardFormat(item[0].time,'YYYY/MM/DD')}` }}</span>
        <el-tooltip v-if="item.length > 1" :content="handleItem(item)" effect="dark" placement="top">
          <div :class="`text-${item[0].status}`" class="text">{{ `包含多个  ${ standardFormat(item[0].time,'YYYY/MM/DD')}` }}</div>
        </el-tooltip>
      </div>
    </div>
    <el-image v-if="isExpedited && isExpedited === 1" :src="pressImg" class="press-img"/>
    <el-image v-if="isExpedited && isExpedited === 2" :src="pressCancelImg" class="press-img"/>
  </div>
</template>

<script>
import { standardFormat } from '@/filters/date';
import pressImg from '@/assets/press_top.png';
import pressCancelImg from '@/assets/press_cancel.png';
import finishedIcon from '@/assets/finished.png';
import pendingIcon from '@/assets/pending.png';
import progressIcon from '@/assets/progress.png';

export default {
  props: {
    pointer: {
      type: Boolean,
      default: false
    },
    orderStatus: {
      type: Number,
      default: 1
    },
    mode: {
      type: Number,
      default: 1
    },
    isShowScroll: {
      type: Boolean,
      default: false
    },
    stepList: {
      type: Array,
      default: () => {
        return [
          { name: '待发布', id: 1 },
          // { name: '待核算', id: 2 },
          { name: '待审批', id: 3 },
          { name: '待封账', id: 4 },
          { name: '封账中', id: 5 },
          { name: '已封账', id: 6 },
          { name: '已完成', id: 7 }
        ];
      }
    },
    lookActive: {
      type: Number,
      default: null
    },
    disableItems: {
      type: Array,
      default: () => []
    },
    indexJudge: { // 通过index来判断进程样式
      type: Boolean,
      default: false
    },
    nodeApprovers: {
      type: Array,
      default: () => []
    },
    isExpedited: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pressImg,
      pressCancelImg,
      finishedIcon,
      pendingIcon,
      progressIcon
    };
  },
  computed: {
    handleArr() {
      const arr = [];
      this.stepList.forEach(el => {
        arr.push([]);
      });
      this.nodeApprovers.forEach(el => {
        arr[el[0].processStatus] = el;
      });
      return arr;
    }
  },
  methods: {
    standardFormat,
    itemClick(item) {
      this.$emit('itemClick', item);
    },
    handleItem(item = []) {
      return item.map(i => i.name).join('，');
    },
    getStepIcon({ item, index }) {
      if (this.indexJudge) {
        if (this.orderStatus > index || (this.orderStatus === index && index === this.stepList.length - 1)) return this.finishedIcon;
        if (index !== this.stepList.length - 1 && this.orderStatus === index) return this.progressIcon;
      } else {
        if (this.orderStatus > item.id || (this.orderStatus === item.id && index === this.stepList.length - 1)) return this.finishedIcon;
        if (index !== this.stepList.length - 1 && this.orderStatus === item.id) return this.progressIcon;
      }
      return this.pendingIcon;
    }
  }
};
</script>

<style lang="scss" scoped>
.step-container{
  position: relative;
  .press-img{
    position: absolute;
    width: 86px;
    height: 75px;
    top: 0;
    left: 0;
    z-index: 999;
  }
}
.node-approvers{
  display: flex;
  width: 100%;
  height: 32px;
  background: #fafbff;
  .node{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-basis: 50%;
    font-size: 12px;
    .text{
      white-space: nowrap;
    }
  }
  .last-node {
    flex-basis: unset !important;
    min-width: 124px;
    flex-shrink: 0;
  }
}
.circle{
  width: 6px;
  height: 6px;
  margin-right: 4px;
  margin-left: 24px;
  border-radius: 50%;
}
.status-0{
  background: #FD8546;
}
.status-1{
  background: #FF4E5F;
}
.status-2{
  background: #31CC9C;
}
.text-0{
  color: #FD8546;
}
.text-1{
  color: #FF4E5F;
}
.text-2{
  color: #31CC9C;
}
.order-detail-step {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 50px;
  background-color: transparent;
  border-radius: 4px;
  overflow: hidden;
  &.is-scroll {
    overflow-x: auto;
    &::-webkit-scrollbar {
      width: 0px !important;
      height: 0px !important;
    }
    .step-item {
      white-space: nowrap;
      padding: 0 20px;
    }
  }
}
.steps {
  display: flex;
  width: 100%;
  .flex-50 {
    flex-basis: 50%;
  }
  .last {
    flex-shrink: 0;
  }
  .step {
    .center {
      display: flex;
      align-items: center;
    }
    .main-text {
      align-items: flex-start;
      flex-direction: column;
      margin-left: 10px;
      .step-text {
        font-size: 10px;
        color: #999;
      }
      .step-title {
        color: #666;
        font-size: 14px;
        font-weight: 400;
        font-family: PingFang SC, PingFang SC-Medium;
      }
    }
    .icon-wrap {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      background: #DDE1EA;
      background-clip: content-box;
      border: 1px solid #dddddd;
      border-radius: 50%;
      img {
        height: 14px;
        height: 14px;
      }
    }
    .step-line {
      flex: 1;
      height: 4px;
      background: #edeef2;
      border-radius: 2px;
      margin: 0 14px 0 16px;
    }
  }
  .active {
    .icon-wrap {
      background-color: #406EFF;
      border-color: #406EFF;
    }
    .main-text {
      .step-title {
        color: #222;
        font-weight: bold;
      }
    }
  }
  .finish {
    .icon-wrap {
      width: 24px;
      height: 24px;
      padding: 0;
      background: #31CC9C;
      border-color: #31CC9C;
    }
    .main-text {
      .step-title {
        font-weight: bold;
        color: #222;
      }
    }
    .step-line {
      background: #31CC9C;
      border-color: #31CC9C;
    }
  }
  &.disable {
    cursor: not-allowed !important;
  }
}
</style>
